<script setup lang="ts">
import { Ref, nextTick, ref } from 'vue'
import audit from '../assets/1634719160.mp3'
import { wxJSsdk } from '../utils/wx';
import { useRoute, useRouter } from 'vue-router';
import { API } from '../api';
const count = ref(0)
const url = ref(audit);
var audio = ref(null) as unknown as Ref<HTMLAudioElement>;
const playing = ref(false);
const push = useRouter().push
nextTick(() => {
  audio.value.muted = false;
  audio.value.loop = false;
  audio.value.src = url.value
  if (count.value <= 0) {
    audioAutoPlay();
  }
})
function audioAutoPlay() {
  console.log("audio play...");
  audio.value.play();
  playing.value = true;
  document.addEventListener(
    "WeixinJSBridgeReady",
    function () {
      audio.value.play();
      playing.value = true;
    },
    false
  );
  count.value++;
}
//--创建触摸监听，当浏览器打开页面时，触摸屏幕触发事件，进行音频播放
function touchstart() {
  if (count.value <= 0) {
    audioAutoPlay();
  }
}
function Rotation() {
  playing.value = !playing.value;
  console.log(playing.value);
  if (playing.value) {
    // $("#Rotation").addClass("Rotation");
    audio.value.play();
  } else {
    // $("#Rotation").removeClass("Rotation");
    audio.value.pause();
  }
}
const { debug } = useRoute().query
wxJSsdk(!!debug);
const data = ref({
  td: '',
  th: '',
  tm: '',
  ts: '',
  end: false,
  bd: '',
  bh: '',
  bm: '',
  bs: '',
  begin: false,
  share: 0,
  buy: 0,
  browse: 0,
  time: Date.now()
});
// const endTime = "2024/06/22 23:59:59"
// const beginTime = "2024/06/02 00:00:00"
// function GetRTime() {
//   var EndTime = new Date(endTime);
//   var NowTime = new Date(data.value.time += 1000);
//   var t = EndTime.getTime() - NowTime.getTime();
//   var d = 0;
//   var h = 0;
//   var m = 0;
//   var s = 0;
//   if (t >= 0) {
//     d = Math.floor(t / 1000 / 60 / 60 / 24);
//     h = Math.floor((t / 1000 / 60 / 60) % 24);
//     m = Math.floor((t / 1000 / 60) % 60);
//     s = Math.floor((t / 1000) % 60);
//     data.value.td =
//       (d < 10 ? "0" + d : d) + "天";
//     data.value.th =
//       (h < 10 ? "0" + h : h) + "时";
//     data.value.tm =
//       (m < 10 ? "0" + m : m) + "分";
//     data.value.ts =
//       (s < 10 ? "0" + s : s) + "秒";
//   } else {
//     data.value.end = true
//     clearInterval(endTimeRun);
//   }
// }


// function GetBeginTime() {
//   var EndTime = new Date(beginTime);
//   var NowTime = new Date(data.value.time += 1000);
//   var t = EndTime.getTime() - NowTime.getTime();
//   var d = 0;
//   var h = 0;
//   var m = 0;
//   var s = 0;
//   if (t >= 0) {
//     d = Math.floor(t / 1000 / 60 / 60 / 24);
//     h = Math.floor((t / 1000 / 60 / 60) % 24);
//     m = Math.floor((t / 1000 / 60) % 60);
//     s = Math.floor((t / 1000) % 60);
//     data.value.bd =
//       (d < 10 ? "0" + d : d) + "天";
//     data.value.bh =
//       (h < 10 ? "0" + h : h) + "时";
//     data.value.bm =
//       (m < 10 ? "0" + m : m) + "分";
//     data.value.bs =
//       (s < 10 ? "0" + s : s) + "秒";
//   } else {
//     data.value.begin = true
//     clearInterval(beginTimeRun);
//   }
// }
// let endTimeRun = 0 as any
// let beginTimeRun = 0 as any
(async () => {
  const { data: { data: t = {} } } = await API.userControllerXycDataGet()
  data.value.share = t.share || 0
  data.value.buy = t.buy || 0
  data.value.browse = t.browse || 0
  // data.value.time = t.time || Date.now()
  // // 活动开始了，并没结束
  // if (data.value.time > new Date(beginTime).getTime() && data.value.time < new Date(endTime).getTime()) {
  //   data.value.begin = true
  //   data.value.end = false
  //   endTimeRun = setInterval(GetRTime, 1000);
  // } else if (data.value.time < new Date(beginTime).getTime()) { //未开始
  //   data.value.begin = false
  //   data.value.end = false
  //   beginTimeRun = setInterval(GetBeginTime, 1000);
  // } else if (data.value.time > new Date(endTime).getTime()) {  // 已经结束了
  //   data.value.begin = true
  //   data.value.end = true
  // }
  API.userControllerXycDataAdd({ browse: 1 })
})()

</script>

<template>
  <div @touchstart="touchstart" class="body">
    <div class="banner">
      <div id="Rotation" class="vAndi2" @click="Rotation" :class="{ Rotation: playing }">
        <img src="../assets/img/music.png" />
      </div>
      <audio style="display: block; height: 1px" ref="audio" preload="auto" muted playsinline :src="url">
        <source type="audio/mp3" :src="url" />
      </audio>
    </div>
    <img :src="`./index/1_0${i}.jpg`" v-for="i in 3" class="img">
    <div class="actdata">
      <div class="dataleft">
        <ul>
          <li>{{ data.buy }}<br /><small>报名数</small></li>
          <li>{{ data.share }}<br /><small>分享数</small></li>
          <li>{{ data.browse }}<br /><small>浏览数</small></li>
        </ul>
      </div>
      <div class="datacenter"></div>
      <div class="dataright">
        <!-- <div>距离活动结束</div>
        <div class="lasttime" v-if="data.end">活动已结束</div> -->
        <!-- <div class="lasttime" v-if="!data.end">{{ data.td }}{{ data.th }}{{ data.tm }}{{ data.ts }}</div> -->
        <a @click="push('/inputlist')">活动已结束</a>
        <div class="lasttime">支付完成即锁定名额</div>
      </div>
      <!-- <div class="dataright" v-if="!data.begin"> -->
      <!-- <div>距离活动开始</div> -->
      <!-- <div class="lasttime">{{ data.bd }}{{ data.bh }}{{ data.bm }}{{ data.bs }}</div> -->
      <!-- <a href="https://jdchwhcm.kinmay.cn/bomb.php/activity/sign/1982" target="_blank">立即报名</a>
        <div>支付完成即锁定名额</div>
      </div> -->
    </div>
    <img :src="`./index/2_${i < 10 ? `0${i}` : i}.jpg`" v-for="i in 19" class="img" loading="lazy">
  </div>
</template>

<style scoped>
.signguize {
  display: flex;
  flex-direction: column;
}

@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
  }
}

#Rotation {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  position: absolute;
  left: 15px;
  top: 15px;
  z-index: 20000;
  cursor: pointer;
}

#Rotation img {
  width: 30px;
  height: 30px;
}


.Rotation {
  -webkit-transform: rotate(360deg);
  animation: rotation 3s linear infinite;
  -moz-animation: rotation 3s linear infinite;
  -webkit-animation: rotation 3s linear infinite;
  -o-animation: rotation 3s linear infinite;
}

.body {
  padding-bottom: 0;
  min-height: 100vh;
  width: 100vw;
}

.img {
  width: 100%;
}

.actdata {
  height: 80px;
  position: relative;
}

.dataleft {
  float: left;
  width: 60%;
  height: 80px;
  background-color: #a82020;
}

.dataright {
  padding-top: 5px;
  float: right;
  width: 40%;
  height: 80px;
  background: #f1d9b5;
  text-align: center;
  color: #d9374b;
  font-size: 14px;
  line-height: 18px;
}

.dataleft ul {
  padding-top: 20px;
}

.dataleft li {
  float: left;
  width: 28%;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  color: #fff;
  line-height: 20px;
}

.dataleft li small {
  clear: both;
  font-size: 12px;
  font-weight: normal;
}

.dataright .lasttime {
  padding-bottom: 5px;
}

.dataright a {
  color: #fff;
  padding: 5px 10px;
  border-radius: 5px;
  background: #d9374b;
  margin: 10px auto 5px;
  display: inline-block;
  border: 0;
}

.datacenter {
  width: 8%;
  height: 80px;
  left: 52%;
  top: 0;
  position: absolute;
  border-bottom: 80px solid #f1d9b5;
  border-left: 8vw solid transparent;
  border-right: 2vw solid transparent;
}
</style>
